<template>
  <div class="user-name-modal">
    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleCancel" center top="15vh"
      width="800px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="教职工" name="1">
          <div class="header">
            <div>
              <el-button type="primary" @click="addTeachInfo">新增教职工</el-button>
              <el-button type="primary" @click="searchName('teacher')">刷新</el-button>
            </div>

            <el-form :inline="true" :model="teacherForm">
              <el-form-item label="">
                <el-input v-model="teacherForm.name" clearable placeholder="搜索人员姓名"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="() => searchName('teacher', 1, teacherForm.name)">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table :data="teacherTableData">
            <el-table-column width="55" align="center" prop="checked" label="">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.checked" @change="changeCurrentRow($event, scope.$index, scope.row)">
                </el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="姓名">
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column label="职工号">
              <template slot-scope="scope">{{ scope.row.number }}</template>
            </el-table-column>
          </el-table>
          <el-pagination layout="total, prev, pager, next" @current-change="(page) => pageHandleChange('teacher', page)"
            :current-page="teacherCurrentPage" :total="teacherTotalPageNum"></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="学生" name="2">
          <div class="header">
            <div>
              <el-button type="primary" @click="addStudentInfo">新增学生</el-button>
              <el-button type="primary" @click="searchName('student')">刷新</el-button>
            </div>

            <el-form :inline="true" :model="studentForm">
              <el-form-item label="">
                <el-input v-model="studentForm.name" clearable placeholder="搜索人员姓名"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="() => searchName('student', 1, studentForm.name)">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table :data="studentTableData">
            <el-table-column width="55" align="center" prop="checked" label="">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.checked" @change="changeCurrentRow($event, scope.$index, scope.row)">
                </el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="姓名">
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column label="学籍号">
              <template slot-scope="scope">{{ scope.row.code }}</template>
            </el-table-column>
          </el-table>
          <el-pagination layout="total, prev, pager, next" @current-change="(page) => pageHandleChange('student', page)"
            :current-page="studentCurrentPage" :total="studentTotalPageNum"></el-pagination>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" size="small">取 消</el-button>
        <el-button type="primary" @click="handleOk" size="small">确 定</el-button>
      </div>
    </el-dialog>
    <addTeachInfo :infoData="infoData" :deptData="departments" :addTeachForm="addTeachForm" :data="addTeachFormData"
      @closeaddTeachForm="addTeachForm.flag = false" />
    <addStudentInfo :addStudentForm="addStudentForm" :data="addStudentFormData" :comData="comData" :isAdd="isAdd"
      @closeaddStudentForm="addStudentForm.flag = false" />
  </div>
</template>

<script>
import { queryDeptListBySchoolNo } from '@/views/children/basic/js/teacherInfo'
import addTeachInfo from '@/views/children/basic/components/addTeachInfo'
import addStudentInfo from '@/views/children/basic/components/addStudentInfo'
import { sepDataDicInfoQuery } from '@/views/children/basic/js/controllerInfo'
import { getStudentInfo, getTeacherInfo } from '../js/auth'
import { decrypt } from '@/utils/crypto'
export default {
  name: 'UserNameModal',
  props: ['userNameOK'],
  components: {
    addTeachInfo,
    addStudentInfo
  },
  provide () {
    return {
      handleSearch: () => {
        // 新增教职工或者学生后刷新列表
        this.searchName('student', this.studentCurrentPage)
        this.searchName('teacher', this.teacherCurrentPage)
      }
    }
  },
  data () {
    return {
      pageSize: 10,
      studentTotalPageNum: 0,
      teacherTotalPageNum: 0,
      studentCurrentPage: 1,
      teacherCurrentPage: 1,
      isAdd: false,
      comData: {},
      title: '',
      activeName: '1',
      dialogVisible: false,
      teacherForm: {
        name: ''
      },
      studentForm: {
        name: ''
      },
      teacherTableData: [],
      studentTableData: [],
      currentRow: [],
      infoData: {},
      departments: [],
      addTeachForm: {
        flag: false,
        title: ''
      },
      addTeachFormData: {},
      postTypes: [],
      addStudentForm: {
        flag: false,
        title: ''
      },
      addStudentFormData: {
        sepSchoolHonorInfoList: [
          {
            name: ''
          }
        ],
        imageUrl: '',
        name: '',
        code: '',
        pinyinName: '',
        englishName: '',
        contact: '',
        address: '',
        status: '',
        isCreateAccount: 1,
        account: '',
        schoolDistrictNo: '',
        gender: '',
        nationality: '',
        cardType: '',
        idCard: '',
        birthday: '',
        birthPlace: [],
        nativePlace: [],

        nation: '',
        politicsStatus: '',
        compatriotCode: '',
        religionCode: '',
        healthCode: '',
        bloodTypeCode: '',
        isOnlyChild: '',
        isMigrantChild: '',
        isOrphan: '',
        isMartyrChild: '',
        isDisabled: '',
        disabledCode: '',
        isBoard: '',
        speciality: '',
        residenceCode: '',
        residenceLocation: [],
        typeCode: '',
        currentStatusCode: '',
        currentSchoolCode: '',
        attendType: '',
        residenceAddress: ''
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    handleOk () {
      this.userNameOK(this.currentRow)
      this.dialogVisible = false
    },

    init () {
      this.sepDataDicInfoQuery()
      this.queryDeptListBySchoolNo()
    },

    addStudentInfo () {
      this.isAdd = false
      this.addStudentForm.flag = true
      this.addStudentForm.title = '新增学生信息'
      this.addStudentFormData = {
        sepSchoolHonorInfoList: [
          {
            name: '',
            awardTime: '',
            level: '',
            awardType: 0,
            rewardsBureau: '',
            awardTermId: '',
            awardLevel: '',
            subjectType: '',
            HonorFileList: [],
            awardPic: ''
          }
        ],
        imageUrl: '',
        name: '',
        code: '',
        pinyinName: '',
        englishName: '',
        contact: '',
        address: '',
        status: '',
        isCreateAccount: 1,
        account: '',
        schoolDistrictNo: '',
        gender: '',
        nationality: '',
        cardType: '',
        idCard: '',
        birthday: '',
        birthPlace: [],
        nativePlace: [],

        nation: '',
        politicsStatus: '',
        compatriotCode: '',
        religionCode: '',
        healthCode: '',
        bloodTypeCode: '',
        isOnlyChild: '',
        isMigrantChild: '',
        isOrphan: '',
        isMartyrChild: '',
        isDisabled: '',
        disabledCode: '',
        isBoard: '',
        speciality: '',
        residenceCode: '',
        residenceLocation: [],
        typeCode: '',
        currentStatusCode: '',
        currentSchoolCode: '',
        attendType: ''
      }
    },

    async sepDataDicInfoQuery () {
      const data = await sepDataDicInfoQuery()
      if (data) {
        this.infoData = data.data
        this.postTypes = data.data
        this.comData = data.data
      }
    },

    queryDeptListBySchoolNo () {
      queryDeptListBySchoolNo({ parentNo: '' }).then((res) => {
        this.departments = res.data
      })
    },

    // 新增教职工信息
    addTeachInfo () {
      this.addTeachForm.flag = true
      this.addTeachForm.title = '新增教职工信息'
      this.addTeachFormData = {
        isCreateAccount: 1,
        gender: 0,
        cardType: '1',
        nationality: '156',
        positionType: '0'
      }
    },

    // 打开
    openModal () {
      this.dialogVisible = true
      this.searchName('student')
      this.searchName('teacher')
    },

    // 取消
    handleCancel () {
      this.dialogVisible = false
    },

    changeCurrentRow (val, rowIndex, row) {
      // 遍历表格的数据，将非本行的所有数据的checked属性置为false，即取消选择
      let mainData = []
      let viceData = []

      if (this.activeName === '1') {
        mainData = this.teacherTableData
        viceData = this.studentTableData
      } else {
        viceData = this.teacherTableData
        mainData = this.studentTableData
      }

      mainData.forEach((item, index) => {
        if (index === rowIndex) {
          item.checked = val
        } else {
          item.checked = false
        }
      })

      viceData.forEach((item) => (item.checked = false))

      if (this.activeName === '1') {
        this.teacherTableData = mainData
        this.studentTableData = viceData
      } else {
        this.teacherTableData = viceData
        this.studentTableData = mainData
      }

      this.currentRow = {
        ...row,
        userType: this.activeName === '1' ? ['6'] : ['7']
      } // 保存点击行数据

      // console.log(this.currentRow)
    },

    pageHandleChange (type, page) {
      this.searchName(type, page)
    },

    searchName (type, page = 1, name = '') {
      if (type === 'teacher') {
        this.teacherCurrentPage = page
        let params = {
          accountStatus: '',
          deptNo: '',
          downloadType: 0,
          name: name,
          number: '',
          pageNum: page,
          pageSize: this.pageSize,
          positionType: ''
        }
        getTeacherInfo(params).then((res) => {
          let data = JSON.parse(decrypt(res.data))
          if (data) {
            this.teacherTableData = data.records.map((item) => {
              if (item.no === this.currentRow.no) {
                return {
                  ...item,
                  checked: true
                }
              } else {
                return {
                  ...item,
                  checked: false
                }
              }
            })
            this.teacherTotalPageNum = data.total
          }
        })
      } else {
        this.studentCurrentPage = page
        let params = {
          code: '',
          name: name,
          nation: '',
          pageNum: page,
          pageSize: this.pageSize,
          status: ''
        }
        getStudentInfo(params).then((res) => {
          let data = JSON.parse(decrypt(res.data))
          if (data) {
            this.studentTableData = data.records.map((item) => {
              if (item.no === this.currentRow.no) {
                return {
                  ...item,
                  checked: true
                }
              } else {
                return {
                  ...item,
                  checked: false
                }
              }
            })
            this.studentTotalPageNum = data.total
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.user-name-modal {
  .header {
    display: flex;
    justify-content: space-between;
  }
}
</style>
